<template>
    <div class="home-container">
        <van-nav-bar fixed style="z-index: 2;">
            <template #title>
                <van-button type="info" size="small" round icon="search" class="search-btn" to="/search">搜索</van-button>
            </template>
        </van-nav-bar>
        <div class="hamburger-btn" @click="isShow = true">
            <i class="toutiao toutiao-gengduo">
                <div class="hamburger-bg"></div>
            </i>
        </div>
        <van-tabs v-model="active" animated swipeable class="channel-tabs" color="#3296fa" title-active-color="#333"
            offset-top="1.2267rem" sticky title-inactive-color="#777">
            <van-tab v-for="obj in channels" :key="obj.id" :title="obj.name">
                <ArticleList :channel_obj="obj"></ArticleList>
            </van-tab>
            <template #nav-right>
                <div class="placeholder">
                </div>
            </template>
        </van-tabs>
        <van-popup v-model="isShow" closeable position="bottom" :style="{ height: '100%' }"
            close-icon-position="top-left">
            <ChannelEdit :myChannels="channels" :active="active" @updateActive="onupdateActive"></ChannelEdit>
        </van-popup>
    </div>
</template>

<script>
import { getUserChannels } from '../../api/user';
import ArticleList from './components/article-list.vue'
import ChannelEdit from './components/channel-edit.vue'
import { mapState } from 'vuex';
import { getItem } from '../../utils/storage';

export default {
    name: 'HomeIndex',
    data() {
        return {
            active: 0,
            channels: [],
            isShow: false
        }
    },
    created() {
        this.loadChannels()
    },
    methods: {
        async loadChannels() {
            try {
                if (this.user) {
                    const { data } = await getUserChannels()
                    this.channels = data.data.channels
                } else {
                    const localChannels = getItem('toutiao_channels')
                    if (localChannels) {
                        this.channels = localChannels
                    } else {
                        const { data } = await getUserChannels()
                        this.channels = data.data.channels
                    }
                }

            } catch (err) {
                console.log(err);
            }
        },
        onupdateActive(index, isShowEdit = true) {
            this.active = index
            this.isShow = isShowEdit
        }
    },
    computed: {
        ...mapState(['user'])
    },
    components: {
        ArticleList,
        ChannelEdit
    }
}
</script>

<style scoped lang="less">
.home-container {
    padding-bottom: 100px;

    :deep(.van-nav-bar__title) {
        max-width: unset;
    }

    .search-btn {
        width: 555px;
        height: 64px;
        background-color: #5babfb;
        border: none;
        font-size: 28px;
    }

    .hamburger-btn {
        position: absolute;
        left: 684px;
        top: 92px;
        z-index: 100;
        width: 66px;
        height: 82px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        opacity: 0.9;

        i.toutiao-gengduo {
            font-size: 34px;
        }

        .hamburger-bg {
            position: absolute;
            right: 66px;
            top: 0;
            height: 81px;
            width: 2px;
            background-image: url('../../assets/gradient-gray-line.png');
            background-size: contain;
        }
    }

    :deep(.channel-tabs) {
        margin-top: 92px;

        .van-tabs__wrap {
            height: 82px;
            // position: fixed;
        }

        .van-tab {
            border-right: 1px solid #edeff3;
            min-width: 200px;
            font-size: 30px;
        }

        .van-tabs__line {
            width: 31px;
            height: 6px;
            bottom: 8px;
        }

        .van-tabs__nav--line {
            padding-bottom: 0;
        }

        .placeholder {
            width: 48px;
            height: 22px;
            flex-shrink: 0;
        }
    }
}
</style>